<template>
  <div class="Pagination">
    <p @click="countLeft">
      <</p>
        <ul class="Pagination-ul" v-for="value in pages" :key="value" @click="changeLi(value)">
          <li :class="count==value ? 'changeLi':''">{{value}}</li>
        </ul>
        <p @click="countRight">></p>
  </div>
</template>

<script>
  export default {
    props: ["PaginationDate"],
    data() {
      return {
        pages: 0,
        count: 1
      }
    },
    created() {
      console.log(this.PaginationDate);
      this.pages = Math.ceil(this.PaginationDate.total / this.PaginationDate.size);
      console.log(this.pages);
    },
    methods: {
      changeLi(i) {
        this.count = i;
      },
      countLeft() {
        if (this.count == 1) return
        this.count--
      },
      countRight() {
        if (this.count == this.pages) return
        this.count++
      }
    }
  }
</script>
<style lang="less" scoped>
  @sizepx: 40px;

  .Pagination {
    display: flex;
    width: 400px;
    align-items: center;
    justify-content: center;
    margin: 30px auto;

    p {
      margin: 0;
      padding: 0;
      width: @sizepx;
      height: @sizepx;
      cursor: pointer;
      user-select: none;
      line-height: @sizepx;
      text-align: center;
      border-radius: 50%;
      margin-right: 10px;
      background-color: #F6F6F6;
    }
  }

  .Pagination-ul {
    cursor: pointer;
    margin: 0;
    padding: 0;

    &>li {
      width: @sizepx;
      height: @sizepx;
      line-height: @sizepx;
      text-align: center;
      border-radius: 50%;
      margin-right: 10px;
      background-color: #F6F6F6;
    }
  }

  .changeLi {
    background: #F7941F !important;
    color: white;
  }
</style>